<template>
  <div class="kehudetails">
    <div class="top-box">
      <div class="left-box">
        <div class="color-box"></div>
        <p>客户详情</p>
      </div>
      <el-button class="right-box" type="info" icon="el-icon-back" @click="Return()">返回</el-button>
    </div>
    <div class="content">
      <div class="top">基本信息</div>
      <div class="formss">
        <div class="f1">
          <el-form :model="formInline" class="demo-form-inline" label-width="130px">
            <el-form-item label="企业编号">
              <el-input v-model="formInline.componyno"></el-input>
            </el-form-item>
            <el-form-item label="信用额度">
              <el-input v-model="formInline.creditlines"></el-input>
            </el-form-item>
            <el-form-item label="联系人">
              <el-input v-model="formInline.linkman"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="f2">
          <el-form :model="formInline" class="demo-form-inline" label-width="130px">
            <el-form-item label="企业名称">
              <el-input v-model="formInline.componyname"></el-input>
            </el-form-item>

            <el-form-item label="到期欠款（元）">
              <el-input v-model="formInline.expriedebt"></el-input>
            </el-form-item>

            <el-form-item label="联系方式">
              <el-input v-model="formInline.linkphone"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="f3">
          <el-form :model="formInline" class="demo-form-inline" label-width="130px">
            <el-form-item label="企业地址">
              <el-input v-model="formInline.address"></el-input>
            </el-form-item>

            <el-form-item label="未到期欠款（元）">
              <el-input v-model="formInline.unexpriedebt"></el-input>
            </el-form-item>

            <el-form-item label="职务">
              <el-input v-model="formInline.duty"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="f4">
          <el-form :model="formInline" class="demo-form-inline" label-width="130px">
            <el-form-item label="合作年限">
              <el-input v-model="formInline.collecttime"></el-input>
            </el-form-item>

            <el-form-item label="欠款总额（元）">
              <el-input v-model="formInline.totalexpriedebt"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="f5">
          <el-form :model="formInline" class="demo-form-inline" label-width="130px">
            <el-form-item label="合作状态">
              <el-input v-model="formInline.state"></el-input>
            </el-form-item>

            <el-form-item label="订单总额（元）">
              <el-input v-model="formInline.orderpriedebt"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="企业编号">
            <el-input v-model="formInline.bianhao"></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input v-model="formInline.mingcheng"></el-input>
          </el-form-item>
          <el-form-item label="企业地址">
            <el-input v-model="formInline.address"></el-input>
          </el-form-item>
          <el-form-item label="合作年限">
            <el-input v-model="formInline.nianxian"></el-input>
          </el-form-item>
          <el-form-item label="合作状态">
            <el-input v-model="formInline.status"></el-input>
          </el-form-item>
          <el-form-item label="信用额度">
            <el-input v-model="formInline.edu"></el-input>
          </el-form-item>
          <el-form-item label="到期欠款（元）">
            <el-input v-model="formInline.dqqiankuan"></el-input>
          </el-form-item>
          <el-form-item label="未到期欠款（元）">
            <el-input v-model="formInline.wdqqiankuan"></el-input>
          </el-form-item>
          <el-form-item label="欠款总额（元）">
            <el-input v-model="formInline.qke"></el-input>
          </el-form-item>
          <el-form-item label="订单总额（元）">
            <el-input v-model="formInline.dingdane"></el-input>
          </el-form-item>
          <el-form-item label="联系人">
            <el-input v-model="formInline.lianxiren"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="formInline.tel"></el-input>
          </el-form-item>
          <el-form-item label="职务">
            <el-input v-model="formInline.zhiwu"></el-input>
          </el-form-item>
        </el-form>-->
      </div>
    </div>
    <div class="content2">
      <div class="left">
        <div class="t1">
          <div class="top">开票信息</div>
          <div class="form">
            <div class="f6">
              <el-form :model="formInlines" class="demo-form-inline" label-width="130px">
                <el-form-item label="单位名称">
                  <el-input v-model="formInlines.componyname"></el-input>
                </el-form-item>

                <el-form-item label="单位地址">
                  <el-input v-model="formInlines.address"></el-input>
                </el-form-item>

                <el-form-item label="开户行">
                  <el-input v-model="formInlines.openbank"></el-input>
                </el-form-item>

                <el-form-item label="纳税人识别号">
                  <el-input v-model="formInlines.taxpyer"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <div class="f7">
              <el-form :model="formInlines" class="demo-form-inline" label-width="130px">
                <el-form-item label="联系人">
                  <el-input v-model="formInlines.linkman"></el-input>
                </el-form-item>

                <el-form-item label="联系电话">
                  <el-input v-model="formInlines.linkphone"></el-input>
                </el-form-item>

                <el-form-item label="开户账号">
                  <el-input v-model="formInlines.openaccount"></el-input>
                </el-form-item>
              </el-form>
            </div>
            <!-- <el-form
              :inline="true"
              :model="formInlines"
              class="demo-form-inline"
              label-width="130px"
            >
              <el-form-item label="单位名称">
                <el-input v-model="formInlines.danwei"></el-input>
              </el-form-item>
              <el-form-item label="联系人">
                <el-input v-model="formInlines.lxr"></el-input>
              </el-form-item>
              <el-form-item label="单位地址">
                <el-input v-model="formInlines.address"></el-input>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="formInlines.tel"></el-input>
              </el-form-item>
              <el-form-item label="开户行">
                <el-input v-model="formInlines.kaihu"></el-input>
              </el-form-item>
              <el-form-item label="开户账号">
                <el-input v-model="formInlines.zhanghu"></el-input>
              </el-form-item>
              <el-form-item label="纳税人识别号">
                <el-input v-model="formInlines.nasui"></el-input>
              </el-form-item>
            </el-form>-->
          </div>
        </div>
        <div class="t2">
          <div class="top">其他信息</div>
          <div class="form">
            <el-table :data="tableDatas">
              <el-table-column label="信息类型" align="center">
                <template slot-scope="scope">
                  <el-input v-model="scope.row.type" placeholder="信息类型"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="信息内容" align="center">
                <template slot-scope="scope">
                <el-input v-model="scope.row.content" placeholder="信息内容"></el-input>
              </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="top">合作记录</div>
        <div class="form">
          <el-table class="table" :data="tableData" style="width: 100%">
            <el-table-column prop="createon" label="成交时间" align="center"></el-table-column>
            <el-table-column prop="purnum" label="采购单编号" align="center"></el-table-column>
            <el-table-column prop="matname" label="原料名称" align="center"></el-table-column>
            <el-table-column prop="amount" label="数量" align="center"></el-table-column>
            <el-table-column prop="price" label="单价（元）" align="center"></el-table-column>
            <el-table-column prop="total" label="小计（元）" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      formInline: {
        componyno: "",
        creditlines: "",
        linkman: "",
        componyname: "",
        linkphone: "",
        address: "",
        duty: "",
        state: "",
        collecttime:"",
        expriedebt:"",
        unexpriedebt:"",
        totalexpriedebt:"",
        orderpriedebt:""
      },
      formInlines: {
        componyname: "",
        address: "",
        openbank: "",
        taxpyer: "",
        linkman: "",
        linkphone: "",
        openaccount: ""
      },
      tableData: [],
      tableDatas:[
        {
          type:"",
          content:""
        }
      ],
      no: ""
    };
  },
  created() {
    this.no = this.$route.query.no;
    this.getData();
  },
  methods: {
    getData() {
      var obj = {
        componyno: this.no
      };
      var objs = JSON.stringify(obj);
      axios(
        "/apis/PresidentManagement.asmx/Customerinfo?index=2&jsondata=" + objs
      ).then(({ data }) => {
        var datas = this.$x2js.xml2js(data);
        var list = JSON.parse(datas.string.__text);
        console.log(list);
        this.formInline.componyno = list.componyno
        this.formInline.creditlines = list.creditlines
        this.formInline.linkman = list.linkman
        this.formInline.componyname = list.componyname
        this.formInline.linkphone = list.linkphone
        this.formInline.address = list.address
        this.formInline.duty = list.duty
        this.formInline.state = list.state
        this.formInline.collecttime = list.collecttime
        this.formInline.expriedebt = list.expriedebt
        this.formInline.unexpriedebt = list.unexpriedebt
        this.formInline.totalexpriedebt = list.totalexpriedebt
        this.formInline.orderpriedebt = list.orderpriedebt
        this.formInlines.componyname = list.componyname
        this.formInlines.address = list.address
        this.formInlines.openbank = list.openbank
        this.formInlines.taxpyer = list.taxpyer
        this.formInlines.linkman = list.linkman
        this.formInlines.linkphone = list.linkphone
        this.formInlines.openaccount = list.openaccount
        this.tableDatas = list.lsom
        for (var i = 0; i < list.lstcr.length; i++) {
          var dd = new Date(parseInt(list.lstcr[i].createon.substr(6, 13)));
          var y = dd.getFullYear();
          var m = dd.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = dd.getDate();
          d = d < 10 ? "0" + d : d;
          list.lstcr[i].createon = y + "-" + m + "-" + d;
        }
        this.tableData = list.lstcr
      });
    },
    Return() {
      window.history.go(-1);
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

// .kehudetails {
//   padding-left: 20px;
//   padding-right: 20px;
//   padding-top: 20px;
// }
.top-box {
  width: 100%;
  height: 60px;
  overflow: hidden;
  margin-bottom: 30px;
}
.left-box {
  width: 100px;
  height: 40px;
  float: left;
  margin-top: 10px;
  overflow: hidden;
  margin-left: 1%;
}
.color-box {
  width: 5px;
  height: 20px;
  float: left;
  margin-top: 10px;
  background-color: $Header_color;
}
.left-box p {
  float: left;
  margin-left: 5px;
  line-height: 40px;
}
.right-box {
  float: right;
  margin-right: 2%;
  border-radius: 5px;
  margin-top: 15px;
}
.content {
  margin-left: 20px;
  margin-right: 10px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 5px;
}
.top {
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
  padding-right: 10px;
  border-bottom: 1px solid #f5f5f5;
  color: #505050;
  margin-bottom: 15px;
}
.form {
  padding-left: 10px;
  overflow: hidden;
}
.formss {
  padding-left: 10px;
  overflow: hidden;
}
.f1,
.f2,
.f3,
.f4,
.f5 {
  width: 20%;
  float: left;
}
.f6,
.f7 {
  width: 50%;
  float: left;
}
.content2 {
  margin-left: 20px;
  margin-right: 10px;
  overflow: hidden;
}
.left {
  width: 45%;
  height: 500px;
  display: inline-block;
}
.right {
  width: 54%;
  height: 500px;
  background-color: #fff;
  border-radius: 5px;
  float: right;
}
.t1 {
  height: 310px;
  background-color: #fff;
  border-radius: 5px;
  margin-bottom: 18px;
}
.t2 {
  height: 172px;
  background-color: #fff;
  border-radius: 5px;
}
.el-input {
  width: 100px;
}
.t2 .el-input {
  width: 250px;
}
// .el-table__header-wrapper{
//   height: 5px;
// }
</style>